<template>
<div class="box" >
  <div class="list-view" ref="listView">
    <ul>
      <li v-for="group in singers" class="list-group" :key="group.id" ref="listGroup">
        <h2 class="list-group-title">{{ group.title }}</h2>
        <ul>
          <li v-for="item in group.items" class="list-group-item" :key="item.id">
            <!-- <img v-lazy="item.avatar" class="avatar"> -->
            <img  class="avatar">
            <span class="name">{{ item.name }}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="list-shortcut">
      <ul>
        <li v-for="(item, index) in shortcutList"
        class="item"
        :data-index="index"
        :key="item.id"
        @touchstart="onShortcutStart"
        @click="onShortcutStart"
        @touchmove.stop.prevent="onShortcutMove"
        :class="{'current': currentIndex === index}"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  data () {
    return {
      singers:[],
      scrollY: 0,
      currentIndex: 0
    }
  },
  created () {
    this.touch = {}
    // 初始化 better-scroll 必须要等 dom 加载完毕
		this.getlistData()
  },
  methods: {
		getlistData(){
			this.singers= [
			    {
			      title: '热门',
			      items: [
			        {
			          id: 6452,
			          name: '周杰伦',
			          avatar:
			            'http://p3.music.126.net/o-FjCrUlhyFC96xiVvJZ8g==/109951163111191410.jpg'
			        },
			        {
			          id: 2116,
			          name: '陈奕迅',
			          avatar:
			            'http://p4.music.126.net/_d1scu7z_1dmd0Zgv9mTLA==/19165587183900212.jpg'
			        },
			        {
			          id: 5781,
			          name: '薛之谦',
			          avatar:
			            'http://p4.music.126.net/ULlwJ2drOfYv-f6-_7jGGQ==/3250156379592966.jpg'
			        },
			        {
			          id: 126339,
			          name: 'BIGBANG',
			          avatar:
			            'http://p4.music.126.net/H4Lh45kDfeb1Ke7THhNWjQ==/109951163109244011.jpg'
			        },
			        {
			          id: 3684,
			          name: '林俊杰',
			          avatar:
			            'http://p3.music.126.net/cnGpIQ6rQCKVrDyVVSpzeg==/3263350518850877.jpg'
			        },
			        {
			          id: 96266,
			          name: 'Maroon 5',
			          avatar:
			            'http://p3.music.126.net/h-ynyQrpyIvfJeW_DeaqHA==/1385384666932895.jpg'
			        },
			        {
			          id: 9621,
			          name: '王菲',
			          avatar:
			            'http://p4.music.126.net/GKhjgN1ltQYK3eYf9DdJwg==/18727981557622763.jpg'
			        },
			        {
			          id: 4292,
			          name: '李荣浩',
			          avatar:
			            'http://p4.music.126.net/tpH_HIHPDjRZep1pJC3q2w==/109951163062593811.jpg'
			        },
			        {
			          id: 7763,
			          name: 'G.E.M.邓紫棋',
			          avatar:
			            'http://p4.music.126.net/r7uMnwjWpYMuQI_3ZTg56A==/18528969953189760.jpg'
			        },
			        {
			          id: 6460,
			          name: '张学友',
			          avatar:
			            'http://p3.music.126.net/1JG8Uwzb5XAJXaPUHR6RBw==/3238061747024716.jpg'
			        }
			      ]
			    },
			    {
			      title: 'A',
			      items: [
			        {
			          id: 46487,
			          name: 'Adele',
			          avatar:
			            'http://p4.music.126.net/6iuRSwLHGrjp3RJH86tfuQ==/3261151495434554.jpg'
			        },
			        {
			          id: 1045123,
			          name: 'Alan Walker',
			          avatar:
			            'http://p4.music.126.net/AsrGD4Sf0HWJ3mK-Y__PLw==/18981968742063387.jpg'
			        },
			        {
			          id: 7063,
			          name: 'A-Lin',
			          avatar:
			            'http://p4.music.126.net/8iSt6sAD819N3juz-bu2vQ==/1379887107721899.jpg'
			        },
			        {
			          id: 48161,
			          name: 'Ariana Grande',
			          avatar:
			            'http://p3.music.126.net/hqr3IB1u1UVJKkmxyIvsfA==/18701593278522174.jpg'
			        },
			        {
			          id: 16152,
			          name: 'Aimer',
			          avatar:
			            'http://p3.music.126.net/7oFBcNAt1TXGzliOEc3p7g==/109951163112362346.jpg'
			        },
			        {
			          id: 45236,
			          name: 'Avicii',
			          avatar:
			            'http://p3.music.126.net/h1wzVYeqth2d2ujPefocGQ==/18588343581208995.jpg'
			        },
			        {
			          id: 46490,
			          name: 'Avril Lavigne',
			          avatar:
			            'http://p3.music.126.net/plN1CKu6igIh7fKrE8prWA==/18912699509666227.jpg'
			        },
			        {
			          id: 87066,
			          name: 'Audio Machine',
			          avatar:
			            'http://p3.music.126.net/C4QsdeWjFi_ZrDAxUrF0MQ==/109951163187133601.jpg'
			        }
			      ]
			    },
			    {
			      title: 'B',
			      items: [
			        {
			          id: 126339,
			          name: 'BIGBANG',
			          avatar:
			            'http://p4.music.126.net/H4Lh45kDfeb1Ke7THhNWjQ==/109951163109244011.jpg'
			        },
			        {
			          id: 178059,
			          name: 'Bruno Mars',
			          avatar:
			            'http://p3.music.126.net/Zf1ESZwNs0MaiqLBAZ2PWQ==/18723583511044011.jpg'
			        },
			        {
			          id: 11127,
			          name: 'Beyond',
			          avatar:
			            'http://p4.music.126.net/wuaNikQW2tPPFN0Oe5Rk9w==/80264348845616.jpg'
			        },
			        {
			          id: 783124,
			          name: 'BTS (防弹少年团)',
			          avatar:
			            'http://p3.music.126.net/YHtpXGyzCv093GLtujr1cQ==/109951163064390008.jpg'
			        }
			      ]
			    },
			    {
			      title: 'C',
			      items: [
			        {
			          id: 2116,
			          name: '陈奕迅',
			          avatar:
			            'http://p4.music.126.net/_d1scu7z_1dmd0Zgv9mTLA==/19165587183900212.jpg'
			        },
			        {
			          id: 89365,
			          name: 'Coldplay',
			          avatar:
			            'http://p4.music.126.net/eL-ft_ucUcby648eVnNewA==/19162288649094558.jpg'
			        },
			        {
			          id: 1007170,
			          name: '陈粒',
			          avatar:
			            'http://p3.music.126.net/Q92YwJrk2f2tsK-7B0VIhQ==/6628955605123612.jpg'
			        },
			        {
			          id: 2112,
			          name: '陈小春',
			          avatar:
			            'http://p3.music.126.net/WA-eUvljuoahxnENnwqx1g==/172623325577460.jpg'
			        },
			        {
			          id: 90331,
			          name: 'Charlie Puth',
			          avatar:
			            'http://p4.music.126.net/jKGxUbCYhy5aaKlvlrLM2w==/109951163040583012.jpg'
			        },
			        {
			          id: 50934,
			          name: 'Carly Rae Jepsen',
			          avatar:
			            'http://p4.music.126.net/YzpodJ0TyW4ZC587Porasw==/240793046499895.jpg'
			        },
			        {
			          id: 7217,
			          name: '陈绮贞',
			          avatar:
			            'http://p4.music.126.net/bQEPHbVRPhyEnyYNe8zUqA==/153931627905286.jpg'
			        },
			        {
			          id: 159692,
			          name: '初音ミク',
			          avatar:
			            'http://p3.music.126.net/tMz0TTyDO4pJv3FMETjRGw==/109951163021786523.jpg'
			        }
			      ]
			    },
			    {
			      title: 'E',
			      items: [
			        {
			          id: 759509,
			          name: 'EXO',
			          avatar:
			            'http://p3.music.126.net/DZ7MuNXFMCcL_v8zyNeygw==/109951163175601143.jpg'
			        },
			        {
			          id: 32665,
			          name: 'Eminem',
			          avatar:
			            'http://p4.music.126.net/4nBVmtjIoX5A-QZmLPaHdg==/109951163078482452.jpg'
			        },
			        {
			          id: 33184,
			          name: 'Ed Sheeran',
			          avatar:
			            'http://p4.music.126.net/7QK82incNi3k9Gfpot_ykg==/18636722092498224.jpg'
			        },
			        {
			          id: 56598,
			          name: 'Ellie Goulding',
			          avatar:
			            'http://p4.music.126.net/dh3LtjjtVjkd33Vb16nBXg==/19019352137349259.jpg'
			        }
			      ]
			    },
			    {
			      title: 'F',
			      items: [
			        {
			          id: 56782,
			          name: 'Fall Out Boy',
			          avatar:
			            'http://p4.music.126.net/lPgsuTf0ma76HpXK8ff0jw==/109951163054786259.jpg'
			        },
			        {
			          id: 2738,
			          name: '方大同',
			          avatar:
			            'http://p4.music.126.net/tTZcmIj2RV3ahQ-PvT-fEg==/109951163185998147.jpg'
			        }
			      ]
			    },
			    {
			      title: 'G',
			      items: [
			        {
			          id: 7763,
			          name: 'G.E.M.邓紫棋',
			          avatar:
			            'http://p4.music.126.net/r7uMnwjWpYMuQI_3ZTg56A==/18528969953189760.jpg'
			        },
			        {
			          id: 123577,
			          name: 'G-Dragon',
			          avatar:
			            'http://p4.music.126.net/0jQmRXv0j-vVGQ5_Z4BliQ==/18725782534592929.jpg'
			        },
			        {
			          id: 2849,
			          name: '古巨基',
			          avatar:
			            'http://p4.music.126.net/dc7JiLEiMpM_MgX0kPPImQ==/5965950092650438.jpg'
			        },
			        {
			          id: 11679,
			          name: 'GALA',
			          avatar:
			            'http://p3.music.126.net/P5yFw0wtRt0u1AbxnrZbpw==/109951162908083277.jpg'
			        }
			      ]
			    },
			    {
			      title: 'H',
			      items: [
			        {
			          id: 711683,
			          name: '好妹妹',
			          avatar:
			            'http://p3.music.126.net/vSTfsnbL-kDJ5a7krBYWQg==/3362306558224859.jpg'
			        },
			        {
			          id: 34517,
			          name: 'Hans Zimmer',
			          avatar:
			            'http://p3.music.126.net/rnc6wVyR_nM0bfxTBZVAuw==/157230162794113.jpg'
			        }
			      ]
			    },
			    {
			      title: 'I',
			      items: [
			        {
			          id: 160947,
			          name: 'IU',
			          avatar:
			            'http://p4.music.126.net/KHy2OOa2omoGt9G11rJtdg==/109951163024470480.jpg'
			        },
			        {
			          id: 94779,
			          name: 'Imagine Dragons',
			          avatar:
			            'http://p4.music.126.net/t8pT1oUfIHYl3lfXnQA2Qw==/19213965695579757.jpg'
			        }
			      ]
			    },
			    {
			      title: 'J',
			      items: [
			        {
			          id: 35531,
			          name: 'Justin Bieber',
			          avatar:
			            'http://p4.music.126.net/UHRt8pyx3YrXD8OTEC2TMA==/18545462627712464.jpg'
			        },
			        {
			          id: 893259,
			          name: '金玟岐',
			          avatar:
			            'http://p4.music.126.net/5xovShW1vWSo4CmS3NvNhA==/109951163071307134.jpg'
			        },
			        {
			          id: 14408,
			          name: '久石譲',
			          avatar:
			            'http://p4.music.126.net/QyLSKOuyTI3vWMQgcyJbGA==/3275445145346068.jpg'
			        },
			        {
			          id: 35331,
			          name: 'Justin Timberlake',
			          avatar:
			            'http://p4.music.126.net/35zgHg2qN-YrypH-QxD-CA==/109951163111839399.jpg'
			        }
			      ]
			    },
			    {
			      title: 'K',
			      items: [
			        {
			          id: 62888,
			          name: 'Katy Perry',
			          avatar:
			            'http://p3.music.126.net/kthCuS87J3gKhafoheYOqA==/19230458369972396.jpg'
			        }
			      ]
			    },
			    {
			      title: 'L',
			      items: [
			        {
			          id: 3684,
			          name: '林俊杰',
			          avatar:
			            'http://p3.music.126.net/cnGpIQ6rQCKVrDyVVSpzeg==/3263350518850877.jpg'
			        },
			        {
			          id: 4292,
			          name: '李荣浩',
			          avatar:
			            'http://p4.music.126.net/tpH_HIHPDjRZep1pJC3q2w==/109951163062593811.jpg'
			        },
			        {
			          id: 3681,
			          name: '李志',
			          avatar:
			            'http://p4.music.126.net/lpuRZG72bxxF8aRKfZ3SFg==/150633093021532.jpg'
			        },
			        {
			          id: 3695,
			          name: '李健',
			          avatar:
			            'http://p4.music.126.net/5C4hU3xFujeEbE6e_AqpwQ==/770757651096525.jpg'
			        },
			        {
			          id: 840134,
			          name: '刘瑞琦',
			          avatar:
			            'http://p3.music.126.net/w0ijYwEUDJV-ifzwibmmYA==/3435973841723920.jpg'
			        },
			        {
			          id: 784453,
			          name: '刘思涵',
			          avatar:
			            'http://p4.music.126.net/d_RA7cWFl0NZ3STNf-d9HQ==/5934064255453343.jpg'
			        },
			        {
			          id: 8325,
			          name: '梁静茹',
			          avatar:
			            'http://p4.music.126.net/zDo8F2ivJ5pFZN6i1zH47Q==/18828037114489745.jpg'
			        },
			        {
			          id: 3699,
			          name: '李克勤',
			          avatar:
			            'http://p3.music.126.net/3XRmZBHvOzxGIBprjRP8hw==/770757651096523.jpg'
			        },
			        {
			          id: 66212,
			          name: 'Lana Del Rey',
			          avatar:
			            'http://p4.music.126.net/mHp6kTAkU3ldDKIjqmlCiw==/109951163007544231.jpg'
			        },
			        {
			          id: 95439,
			          name: 'Linkin Park',
			          avatar:
			            'http://p3.music.126.net/uxUY64QwAiri3NhBicA2fQ==/109951163050440275.jpg'
			        },
			        {
			          id: 3691,
			          name: '刘德华',
			          avatar:
			            'http://p4.music.126.net/fPgII_A81NULgOPjO1nPKw==/40681930245657.jpg'
			        }
			      ]
			    },
			    {
			      title: 'M',
			      items: [
			        {
			          id: 96266,
			          name: 'Maroon 5',
			          avatar:
			            'http://p3.music.126.net/h-ynyQrpyIvfJeW_DeaqHA==/1385384666932895.jpg'
			        },
			        {
			          id: 8926,
			          name: '莫文蔚',
			          avatar:
			            'http://p4.music.126.net/ByXwX59XAoYsY3jwTLvlNQ==/1382086129327137.jpg'
			        },
			        {
			          id: 4592,
			          name: '马頔',
			          avatar:
			            'http://p3.music.126.net/cpfC0E5dtZaChgeao9pNWQ==/2943392628176713.jpg'
			        }
			      ]
			    },
			    {
			      title: 'N',
			      items: [
			        {
			          id: 9061,
			          name: '那英',
			          avatar:
			            'http://p4.music.126.net/tBZrcOqpdhd6Ihjc9ECYUw==/135239930232255.jpg'
			        }
			      ]
			    },
			    {
			      title: 'O',
			      items: [
			        {
			          id: 98105,
			          name: 'OneRepublic',
			          avatar:
			            'http://p4.music.126.net/n3sr7bNMdjILj44rYi7Y8g==/18828037115920682.jpg'
			        },
			        {
			          id: 98351,
			          name: 'One Direction',
			          avatar:
			            'http://p3.music.126.net/VeW5MJ4tV54WP2bMFHHnag==/109951163008253596.jpg'
			        },
			        {
			          id: 40859,
			          name: 'Owl City',
			          avatar:
			            'http://p4.music.126.net/j4uXFu5urMRWpyMCe0pk1g==/18561955301752001.jpg'
			        }
			      ]
			    },
			    {
			      title: 'P',
			      items: [
			        {
			          id: 4721,
			          name: '朴树',
			          avatar:
			            'http://p4.music.126.net/glrZzYJQZXiv51Tj8Uzn8Q==/7951668094170236.jpg'
			        },
			        {
			          id: 41143,
			          name: 'Pitbull',
			          avatar:
			            'http://p3.music.126.net/V7BlvkiacVTqP7jf89vydw==/18740076185711645.jpg'
			        }
			      ]
			    },
			    {
			      title: 'R',
			      items: [
			        {
			          id: 72724,
			          name: 'Rihanna',
			          avatar:
			            'http://p3.music.126.net/f21NQmJ7Zc_HiIp48RUJqA==/18561955301751999.jpg'
			        },
			        {
			          id: 9269,
			          name: '容祖儿',
			          avatar:
			            'http://p4.music.126.net/RA9xjQ0ABACRcfKwutGDnA==/5946158883315120.jpg'
			        }
			      ]
			    },
			    {
			      title: 'S',
			      items: [
			        {
			          id: 9272,
			          name: '孙燕姿',
			          avatar:
			            'http://p4.music.126.net/nXF_Faa7-ZisQShLlAqyjw==/18791753231401604.jpg'
			        },
			        {
			          id: 5073,
			          name: '宋冬野',
			          avatar:
			            'http://p3.music.126.net/FRS2qHabnha-ZlYyfduX7g==/109951162811536835.jpg'
			        },
			        {
			          id: 12707,
			          name: '苏打绿',
			          avatar:
			            'http://p3.music.126.net/znozXOyHQXRc52hU6UAtmg==/756463999935630.jpg'
			        },
			        {
			          id: 11998039,
			          name: 'Sunshine',
			          avatar:
			            'http://p4.music.126.net/wNQy7nRGPipTNHqGzpjlBg==/19218363741953505.jpg'
			        },
			        {
			          id: 740216,
			          name: 'Sam Smith',
			          avatar:
			            'http://p4.music.126.net/uVAelYyxyz84xV1UkjJJVQ==/109951163052849432.jpg'
			        },
			        {
			          id: 126793,
			          name: '少女时代',
			          avatar:
			            'http://p4.music.126.net/b4GUHufeoC2tGEgXIQ8htQ==/18703792302097354.jpg'
			        }
			      ]
			    },
			    {
			      title: 'T',
			      items: [
			        {
			          id: 964486,
			          name: 'Tobu',
			          avatar:
			            'http://p3.music.126.net/QlOUmYAuEyqKO4g96QM1kQ==/5989039837081565.jpg'
			        },
			        {
			          id: 102714,
			          name: 'Two Steps From Hell',
			          avatar:
			            'http://p4.music.126.net/nG3AaqQN4fMQ-Xwhf19Trg==/6027522744141514.jpg'
			        },
			        {
			          id: 44266,
			          name: 'Taylor Swift',
			          avatar:
			            'http://p3.music.126.net/lQgY9bF4ZRCK-h5goGxmCg==/109951163245154611.jpg'
			        },
			        {
			          id: 12977,
			          name: '逃跑计划',
			          avatar:
			            'http://p4.music.126.net/Ii8U2ugJxfpWQZvZPZsYwg==/3418381652800638.jpg'
			        },
			        {
			          id: 127815,
			          name: 'T-ara',
			          avatar:
			            'http://p3.music.126.net/ZfdxyAleCzBP6ZF2fXa23g==/3419481180607870.jpg'
			        },
			        {
			          id: 5196,
			          name: '陶喆',
			          avatar:
			            'http://p3.music.126.net/HciCtD7swUU_D9wem9NfNA==/6044015418524944.jpg'
			        },
			        {
			          id: 1019952,
			          name: 'TheFatRat',
			          avatar:
			            'http://p4.music.126.net/VpsUseY47x0UHz75KKbhtA==/2535473816668478.jpg'
			        },
			        {
			          id: 9489,
			          name: '谭维维',
			          avatar:
			            'http://p3.music.126.net/Szf_ysguX4fe8nznW8otvQ==/3265549576955384.jpg'
			        }
			      ]
			    },
			    {
			      title: 'W',
			      items: [
			        {
			          id: 9621,
			          name: '王菲',
			          avatar:
			            'http://p4.music.126.net/GKhjgN1ltQYK3eYf9DdJwg==/18727981557622763.jpg'
			        },
			        {
			          id: 5346,
			          name: '王力宏',
			          avatar:
			            'http://p4.music.126.net/3sYHMtCKpWIxt9G12yjUTw==/264982302310377.jpg'
			        },
			        {
			          id: 46006,
			          name: 'Wiz Khalifa',
			          avatar:
			            'http://p3.music.126.net/V2sOWUWGAAYR5fnDpNz8RQ==/283673999983666.jpg'
			        },
			        {
			          id: 13193,
			          name: '五月天',
			          avatar:
			            'http://p4.music.126.net/nUVLUL0gG1XfTReU-Us1YA==/18642219650661189.jpg'
			        },
			        {
			          id: 45839,
			          name: 'Westlife',
			          avatar:
			            'http://p4.music.126.net/pJf8MVcvxLX6HVRKZlcMOA==/18766464464525837.jpg'
			        }
			      ]
			    },
			    {
			      title: 'X',
			      items: [
			        {
			          id: 5781,
			          name: '薛之谦',
			          avatar:
			            'http://p4.music.126.net/ULlwJ2drOfYv-f6-_7jGGQ==/3250156379592966.jpg'
			        },
			        {
			          id: 5770,
			          name: '许巍',
			          avatar:
			            'http://p4.music.126.net/I6I81M7B7_hoeqp9VGg8sw==/568447511584754.jpg'
			        },
			        {
			          id: 5771,
			          name: '许嵩',
			          avatar:
			            'http://p4.music.126.net/2ymAK8YTVExZ1eZ072BBCQ==/8934631487417355.jpg'
			        },
			        {
			          id: 9952,
			          name: '谢安琪',
			          avatar:
			            'http://p4.music.126.net/D60e7K2Hxf1uWDRTlGy3uQ==/244091581382928.jpg'
			        },
			        {
			          id: 5768,
			          name: '萧敬腾',
			          avatar:
			            'http://p4.music.126.net/kIyvVOBtz0sPJMom1ss6tA==/1382086116668101.jpg'
			        }
			      ]
			    },
			    {
			      title: 'Y',
			      items: [
			        {
			          id: 6066,
			          name: '杨宗纬',
			          avatar:
			            'http://p3.music.126.net/Q4JSaV98wuU6xElATsFjAw==/3261151495434543.jpg'
			        },
			        {
			          id: 10204,
			          name: '杨千嬅',
			          avatar:
			            'http://p3.music.126.net/Fy3OSgevuA-iwsy3X_pqpA==/235295488361002.jpg'
			        }
			      ]
			    },
			    {
			      title: 'Z',
			      items: [
			        {
			          id: 6452,
			          name: '周杰伦',
			          avatar:
			            'http://p3.music.126.net/o-FjCrUlhyFC96xiVvJZ8g==/109951163111191410.jpg'
			        },
			        {
			          id: 6460,
			          name: '张学友',
			          avatar:
			            'http://p3.music.126.net/1JG8Uwzb5XAJXaPUHR6RBw==/3238061747024716.jpg'
			        },
			        {
			          id: 6731,
			          name: '赵雷',
			          avatar:
			            'http://p4.music.126.net/w_UWOls2uCkFN_U62788Xg==/18806046882229308.jpg'
			        },
			        {
			          id: 6457,
			          name: '张国荣',
			          avatar:
			            'http://p4.music.126.net/wupRd6PIODPM2gMxmlxD8w==/39582418617683.jpg'
			        },
			        {
			          id: 6462,
			          name: '张敬轩',
			          avatar:
			            'http://p3.music.126.net/7a77DZlspSaBZexOr8mdLw==/18863221486279082.jpg'
			        },
			        {
			          id: 10561,
			          name: '张靓颖',
			          avatar:
			            'http://p4.music.126.net/PDSLSEj5EHvGWeaTy5MqWQ==/109951163064519620.jpg'
			        },
			        {
			          id: 10559,
			          name: '张惠妹',
			          avatar:
			            'http://p4.music.126.net/F9asgcj7C7qSl_je9XDvRw==/603631883675241.jpg'
			        },
			        {
			          id: 6472,
			          name: '张杰',
			          avatar:
			            'http://p4.music.126.net/R4it3K4VVd4qOlMv1VvH_w==/18569651881628300.jpg'
			        },
			        {
			          id: 6652,
			          name: '周传雄',
			          avatar:
			            'http://p3.music.126.net/UXycaJG3B1yhBMidEjqH7w==/211106232550480.jpg'
			        },
			        {
			          id: 6454,
			          name: '张信哲',
			          avatar:
			            'http://p3.music.126.net/dtm0L5L0OtxDzDpnFTqVyg==/3285340750049091.jpg'
			        }
			      ]
			    }
			  ]
			setTimeout(() => {
			  this._initSrcoll()
			  this._calculateHeight()
			}, 20)
		},
    _initSrcoll () {
      // console.log('didi')
      this.scroll = new BScroll(this.$refs.listView, {
        probeType: 3,
        click: true
      })

      this.scroll.on('scroll', (pos) => {
        this.scrollY = pos.y
      })
    },
		
    onShortcutStart (e) {
      // 获取到绑定的 index
      let index = e.target.getAttribute('data-index')
      // 使用 better-scroll 的 scrollToElement 方法实现跳转
      this.scrollToElement(index)

      // 记录一下点击时候的 Y坐标 和 index
      let firstTouch = e.touches[0].pageY
      this.touch.y1 = firstTouch
      this.touch.anchorIndex = index
    },
    onShortcutMove (e) {
      // 再记录一下移动时候的 Y坐标，然后计算出移动了几个索引
      let touchMove = e.touches[0].pageY
      this.touch.y2 = touchMove
      // 这里的 16.7 是索引元素的高度
      let delta = Math.floor((this.touch.y2 - this.touch.y1) / 16.7)

      // 计算最后的位置
      // * 1 是因为 this.touch.anchorIndex 是字符串，用 * 1 偷懒的转化一下
      let index = this.touch.anchorIndex * 1 + delta
      this.scrollToElement(index)
    },
    scrollToElement (index) {
      // 处理边界情况
      // 因为 index 通过滑动距离计算出来的
      // 所以向上滑超过索引框框的时候就会 < 0，向上就会超过最大值
      if (index < 0) {
        return
      } else if (index > this.listHeight.length - 2) {
        index = this.listHeight.length - 2
      }
      // listHeight 是正的， 所以加个 -
      this.scrollY = -this.listHeight[index]
      this.scroll.scrollToElement(this.$refs.listGroup[index])
    },
    _calculateHeight () {
      this.listHeight = []
      const list = this.$refs.listGroup
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < list.length; i++) {
        let item = list[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    }
  },
  watch: {
    scrollY (newVal) {
      // 向下滑动的时候 newVal 是一个负数，所以当 newVal > 0 时，currentIndex 直接为 0
      if (newVal > 0) {
        this.currentIndex = 0
        return
      }
      // 计算 currentIndex 的值
      for (let i = 0; i < this.listHeight.length - 1; i++) {
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i + 1]

        if (-newVal >= height1 && -newVal < height2) {
          this.currentIndex = i
          return
        }
      }
      // 当超 -newVal > 最后一个高度的时候
      // 因为 this.listHeight 有头尾，所以需要 - 2
      this.currentIndex = this.listHeight.length - 2
    }
  },
  computed: {
    shortcutList () {
      return this.singers.map((group) => {
        return group.title.substr(0, 1)
      })
    }
  }
}
</script>
<style>
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video, input {
	    margin: 0;
	    padding: 0;
	    border: 0;
	    font-size: 100%;
	    font-weight: normal;
	    vertical-align: baseline;
	} 
	
	li {
	    list-style: none;
	}
 
</style>

<style lang="less" scoped>
.box {
  position: fixed;
  width: 100%;
  height: 100%;
}
.list-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(223, 223, 223);
  .list-group {
    padding-bottom: 30px;
    .list-group-title {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: 12px;
      color: #FFF;
      background: #C20C0C;
    }
    .list-group-item {
      display: flex;
      align-items: center;
      padding: 20px 0 0 30px;
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 5%;
      }
      .name {
        margin-left: 20px;
        color: black;
        font-size: 14px;
        // font-weight: 500;
      }
    }
  }
  .list-shortcut {
    position: absolute;
    z-index: 30;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
    background: rgba(167, 167, 167, 0.5);
    font-family:Helvetica;
    .item {
      padding: 3px;
      line-height: 1;
      color: black;
      font-size: 11px;
      &.current {
        color: #C20C0C;
        // font-weight: bold;
      }
    }
  }
}
</style>
